<style lang="less" scoped>
    .workorder {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        //display: flex;
    }
</style>
<template>
    <div class="workorder">
        <!--<card-table
            cardtitle="工单列表"
            addbuttext="新建工单"
            :columns="columns"
            :selectList="selectList"
            :defaultSelete="defaultSelete"
            :searchForm="searchForm"
            :formItem="formItem"
            @add="add"
            @refresh="refresh"
            @on-current-change="onCurrentChange"
            :data="myorderdata">
        </card-table>-->
        <!--<my-card cardtitle="当前订单：" :showright="false">
            <Table :columns="ordercolumns" :data="myorderdata" style="margin-bottom: 10px"></Table>
        </my-card>-->
        <card-table
            style="margin-top: 10px"
            cardtitle="工单列表"
            addbuttext="新建工单"
            :columns="columns"
            :selectList="selectList"
            :defaultSelete="defaultSelete"
            :searchForm="searchForm"
            :formItem="formItem"
            @add="add"
            @refresh="refresh"
            @on-current-change="onCurrentChange"
            :data="data">
        </card-table>
        <Modal
            v-model="addworkorder"
            title="新建工单"
            :loading="loading"
            @on-ok="modelOk"
            @on-cancel="modelClose">
            <Form :model="addwoform" :label-width="120">
                <FormItem label="订单选择：" prop="oid">
                    <Select v-model="addwoform.oid"  style="width:200px">
                        <Option v-for="item in order" :value="item.id" :key="item.id">
                            <span>{{ item.nub }}</span>
                            <span style="float:right;color:#ccc">{{ item.customernub }}</span>
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="工单编号：" prop="nub">
                    <Input v-model="addwoform.nub" placeholder="请输入工单编号" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="数量：" prop="number">
                    <InputNumber :min="1" v-model="addwoform.number"></InputNumber>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import workorderdata from './workorderdata.js'
    export default {
        name: 'workorder',
        props: ['id'],
        data () {
            return {
                order: this.$store.state.order,
                ordercolumns: [
                    {
                        title: '订单编号',
                        key: 'nub',
                        width: 180
                    },
                    {
                        title: '客户订单编号',
                        key: 'customernub',
                        width: 180
                    },
                    {
                        title: '客户信息',
                        key: 'customermsg',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.customermsg.name),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('p', '编号：' + params.row.customermsg.nub),
                                    h('p', '名称：' + params.row.customermsg.name),
                                    h('p', '地址：' + params.row.customermsg.address),
                                    h('p', '联系人：' + params.row.customermsg.contacts),
                                    h('p', '联系电话：' + params.row.customermsg.phone)
                                ])
                            ])
                        }
                    },
                    {
                        title: '数量',
                        key: 'number',
                        width: 120,
                        render: (h, params) => {
                            return h('span', params.row.number + params.row.unit)
                        }
                    },
                    {
                        title: '产品',
                        key: 'product',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.product.name),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('p', '编号：' + params.row.product.nub),
                                    h('p', '名称：' + params.row.product.name),
                                    h('p', '单位：' + params.row.product.unit),
                                    h('p', '版本号：' + params.row.product.version)
                                ])
                            ])
                        }
                    }
                ],
                columns: [
                    {
                        title: '工单编号',
                        key: 'nub',
                        width: 160
                    },
                    {
                        title: '产品编号',
                        key: 'product',
                        render: (h, params) => {
                            return h('span', params.row.product.nub)
                        }
                    },
                    {
                        title: '产品规格',
                        key: 'product',
                        render: (h, params) => {
                            return h('span', params.row.product.norm)
                        }
                    },
                    {
                        title: '数量',
                        key: 'number',
                        width: 100,
                        render: (h, params) => {
                            return h('span', params.row.number/* + params.row.unit*/)
                        }
                    },
                    {
                        title: '状态',
                        key: 'type',
                        width: 130,
                        render: (h, params) => {
                            let text = '未知'
                            let style = {
                                color: 'red'
                            }
                            switch (params.row.type) {
                                case '1':
                                    text = '已生产';
                                    style.color = '#ccc'
                                    break;
                                case '3':
                                    text = '未生产';
                                    style.color = '#0000ff'
                                    break;
                                case '2':
                                    text = '计划中';
                                    style.color = '#00ff00'
                                    break;
                                case '5':
                                    text = '生产中';
                                    style.color = '#66eeff'
                                    break;
                            }
                            return h('span', {
                                style: style
                            }, text)
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        render: (h, params) => {
                            return h('div', {
                                style: {
                                    display: 'flex',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': () => {
                                            /*let test = {
                                                name: '二维码',
                                                id: 'qrcode',
                                                type: true,
                                                url: '/main/qrcode/' + params.row.id
                                            }
                                            this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)*/
                                            window.open('http://' + window.location.host + window.location.pathname + '/#/shengchan/' + params.row.id)
                                        }
                                    }
                                }, '生产码'),
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': () => {
                                            /*let test = {
                                                name: '二维码',
                                                id: 'qrcode',
                                                type: true,
                                                url: '/main/qrcode/' + params.row.id
                                            }
                                            this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)*/
                                            window.open('http://' + window.location.host + window.location.pathname + '/#/baozhuang/' + params.row.id)
                                        }
                                    }
                                }, '包装码')
                            ]);
                        }
                    }
                ],  //  表格列
                myorderdata: [],
                data: [],  //  表格数据
                selectList: [
                    {
                        label: '工单编号',
                        value: 'nub'
                    },
                    {
                        label: '数量',
                        value: 'number'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'nub',  //  搜索下拉列表默认值
                searchForm: {
                    'nub': '',
                    'number': ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '订单号',
                        key: 'nub',
                        placeholder: '输入工单编号'
                    },
                    {
                        label: '数量',
                        key: 'number',
                        placeholder: '输入工单产品数量'
                    }
                ],  //  搜索表单item
                current: null,
                /*新建工单*/
                addworkorder: false,
                loading: true,
                addwoform: {
                    oid: '',
                    nub: '',
                    number: 1
                }
            }
        },
        watch: {
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '1'
                    }) ? true : false
                },
                deep: true
            },
            '$store.state.order': {
                handler: function (val, oldVal) {
                    this.order = val
                },
                deep: true
            }
        },
        methods: {
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addworkorder = true
            },
            refresh () {
                this.http.getAllWork(this, {})
                //this.http.getOrderInWO(this, {})
            },
            onCurrentChange (current) {
                console.log(current)
                this.current = current
            },
            modelClose () {
            },
            modelOk () {
                console.log(this.addwoform)
                this.http.addWork(this, this.addwoform)
            }
        },
        components: {
            CardTable,
            MyCard
        },
        mounted: function () {
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '1'
            }) ? true : false
            this.http.getAllWork(this, {})
            //this.http.getOrderInWO(this, {})
            console.log(window.location)
        }
    };
</script>
